<template>
  <div class="app-container">
    <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
      <el-form-item label="账单日">
        <el-date-picker
          v-model="pageInfo.t1"
          type="date"
          placeholder="选择日期"
        />
        至
        <el-date-picker
          v-model="pageInfo.t2"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="batchNo"
          label="对账批次"
          width="180"
        />
        <el-table-column
          prop="billDay"
          label="账单日"
          width="180"
        />
        <el-table-column
          prop="billType"
          label="账单类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.billType==1">认证支付</span>
            <span v-if="scope.row.billType==2">代付</span>
            <span v-if="scope.row.billType==3">微信</span>
            <span v-if="scope.row.billType==4">支付宝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkCount"
          label="渠道名称"
        >
          <template slot-scope="scope">
            <span v-if="scope.row">拉卡拉</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="inputDate"
          label="渠道对账文件交易数量"
          width="180"
        />
        <el-table-column
          prop="auditDate"
          label="系统交易流水数量"
          width="180"
        />
        <el-table-column
          prop="diffCount"
          label="差错账数量"
          width="180"
        />
        <el-table-column
          prop="checkDay"
          label="对账日期"
          width="180"
        />
        <el-table-column
          prop="createType"
          label="生成方式"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.createType==1">自动</span>
            <span v-if="scope.row.createType==2">手动</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="completeState"
          label="是否完成对账"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.completeState==1">完成</span>
            <span v-if="scope.row.completeState==2">未完成</span>
            <span v-if="scope.row.completeState==3">取消</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="confirmDate"
          label="对账确认时间"
          width="180"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="findOne(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="渠道名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="交易结果" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item><br>
        <el-form-item label="对账批次" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="交易金额" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item><br>
        <el-form-item label="是否差错" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易日期">
          <el-date-picker
            v-model="pageInfo.t1"
            type="date"
            placeholder="选择日期"
          />
          至
          <el-date-picker
            v-model="pageInfo.t2"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item><br>
        <el-form-item label="处理结果" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      :current-page="pageInfo.pageNum"
      :page-sizes="[10, 30, 50, 70]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      pageInfo: {
        pageNum: null,
        pageSize: null,
        t1: null,
        t2: null
      },
      total: null,
      form: {
        id: '',
        batchNo: '',
        billDay: '',
        billType: '',
        checkCount: '',
        diffCount: '',
        checkDay: '',
        createType: '',
        completeState: '',
        confirmDate: ''
      }
    }
  },
  created() {
    this.list()
  },
  methods: {
    list() {
      this.axios.get('http://localhost:80/api/cw/wish/t-cw-check-batch/selects', { params: this.pageInfo }).then((response) => {
        console.log(response.data)
        this.tableData = response.data.obj.list
        this.pageInfo.pageNum = response.data.obj.pageNum
        this.pageInfo.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageInfo.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.pageNum = val
      this.list()
    },
    onSubmit() {
      console.log('submit!')
      this.list()
    },
    findOne() {
      this.dialogFormVisible = true
    },
    save() {
      this.axios.post('http://localhost:80/api/cw/wish/t-cw-check-batch/getOne?batchNo=' + this.form.batchNo).then((response) => {
        console.log(response.data)
      })
    }
  }
}
</script>

<style scoped>

</style>
